<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="角色名称:">
                <el-input v-model="formInline.name" placeholder="请输入角色名称" clearable />
            </el-form-item>
            <el-form-item label="角色标识">
                <el-input v-model="formInline.identity" placeholder="请选择角色标识" clearable />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formInline.status" placeholder="请选择状态" clearable>
                    <el-option label="开" :value="true" />
                    <el-option label="关" :value="false" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">
                    <el-icon>
                        <Search />
                    </el-icon>搜索
                </el-button>
                <el-button @click="onReset">
                    <el-icon>
                        <Refresh />
                    </el-icon>重置
                </el-button>
            </el-form-item>
        </el-form>
        <el-card>
            <div class="title">
                <h4>角色列表</h4>
                <div>
                    <el-button type="primary" @click="onAdd">
                        <el-icon>
                            <CirclePlus />
                        </el-icon>新增角色
                    </el-button>
                    <el-icon style="margin: 0 20px;">
                        <Clock />
                    </el-icon>
                    <el-icon style="margin-right:20px;">
                        <Clock />
                    </el-icon>
                    <el-icon style="margin-right:20px;">
                        <Clock />
                    </el-icon>
                </div>
            </div>
            <el-table :data="tableData" height="460" style="width: 100%;margin-bottom:5px;" border :row-style="{
                position: 'relative'
            }">
                <el-table-column fixed prop="id" label="角色编号" width="180" />
                <el-table-column prop="name" label="角色名称" width="100" />
                <el-table-column prop="identity" label="角色标识" width="120" />
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="{ row }">
                        {{ row.status ? '开' : '关' }}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" show-overflow-tooltip />
                <el-table-column prop="createtime" label="创建时间" width="180" />
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="onEdit(scope.row)">
                            修改
                        </el-button>
                        <el-popconfirm title="是否需要删除?" @confirm="onConfirm(scope.row)" placement="bottom"
                            :teleported="false" effect="light" trigger="hover" width="auto">
                            <template #reference>
                                <el-button link type="primary" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="->, total, sizes, prev, pager, next, jumper" :current-page="current"
                :page-sizes="[10, 20, 30, 40, 50]" :page-size="size" :total="total"
                @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        </el-card>
        <el-dialog v-model="dialogFormVisible" :title="flag ? '新增角色' : '编辑角色'" width="500">
            <el-form :model="form" label-width="80px" :rules="rules">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入角色名称" />
                </el-form-item>
                <el-form-item label="角色标识" prop="identity">
                    <el-input v-model="form.identity" autocomplete="off" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSure">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request.js'

// 响应式数据
const total = ref(0)
const page = ref(1)
const size = ref(10)
const current = ref(1)

const tableData = ref([])
const dialogFormVisible = ref(false)
const flag = ref(true)
const editId = ref('')

const formInline = ref({
    name: '',
    identity: '',
    status: ''
})

const form = ref({
    name: '',
    identity: '',
    remark: ''
})

const rules = ref({
    name: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
    ],
    identity: [
        { required: true, message: '请输入角色标识', trigger: 'blur' },
    ]
})

// 方法
const getList = async () => {
    try {
        const res = await request.get('/role/list', { params: { ...formInline.value, page: page.value, size: size.value } })
        console.log(res, 'res')
        tableData.value = res.data.data
        total.value = res.data.total
    } catch (error) {
        console.error('获取列表失败:', error)
    }
}

const onQuery = () => {
    getList()
}

const onReset = () => {
    formInline.value = {
        name: '',
        identity: '',
        status: ''
    }
    page.value = 1
    size.value = 10
    getList()
}

const handleSizeChange = (val) => {
    size.value = val
    current.value = 1
    page.value = 1
    getList()
}
const handleCurrentChange = (val) => {
    current.value = val
    page.value = val
    getList()
}



const onAdd = () => {
    dialogFormVisible.value = true
    flag.value = true
    form.value = {
        name: '',
        identity: '',
        remark: ''
    }
}

const onSure = async () => {
    try {
        const url = flag.value ? '/role/add' : '/role/edit'
        const params = flag.value ? form.value : { ...form.value, id: editId.value }

        const res = await request.post(url, params)
        if (res.data.code === 200) {
            ElMessage({
                message: flag.value ? '新增成功' : '修改成功',
                type: 'success',
            })
            dialogFormVisible.value = false
            // getList()
        }
    } catch (error) {
        console.error('操作失败:', error)
    }
}

const onEdit = (row) => {
    dialogFormVisible.value = true
    flag.value = false
    form.value = {
        name: row.name,
        identity: row.identity,
        remark: row.remark
    }
    editId.value = row.id
}

const onConfirm = async (row) => {
    try {
        const res = await request.post('/role/delete', { id: row.id })
        if (res.data.code === 200) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getList()
        }
    } catch (error) {
        console.error('删除失败:', error)
    }
}

// 生命周期钩子
onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
</style>
